<%@page import="com.wframe.framework.util.UploadUtil"%>
<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib uri="/WEB-INF/page-base.tld" prefix="w"%>
<%@ include file="/plugins/plupload2/plupload.jsp"%>
<%String path=request.getContextPath(); request.setAttribute("fileserver", UploadUtil.getConfig().getDownserver());%>
<link href='<%=path %>/plugins/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<style>
.pl_upimgdiv img{max-width:100%}
</style>
<script>
	var channeluploader;
	function selchannelimg(){
		
	}
	function delplphoto(fid,bl){
		try{
	   		var f=channeluploader.getFile(fid);
	   		channeluploader.removeFile(f);
   		}catch(e){}
   		$('#plfile_'+fid).remove();
	}
	function channelquerypro(){
		$("#channelProductstb").datagrid("load",{"bean.like":$getByName("proname",$w.currWin()).val(),"bean.rows":100})
	}
	function channelpromoveR(){
		var boxs=$("#channelProductstb").datagrid('getChecked');
		var selds=$("#channelProductsedtb").datagrid('getRows');
		for(var i=0;i<boxs.length;i++){
			var add=true;
			for(var n=0;n<selds.length;n++){
				if(selds[n].idcode==boxs[i].idcode){
					add=false;
					break;
				}
			}
			if(add){
				$('#channelProductsedtb').datagrid('insertRow',{
					index: 0,	// index start with 0
					row: {
						idcode: boxs[i].idcode,
						fullname: boxs[i].fullname,
						productcode:boxs[i].productcode
					}
				});
			}
		}
	}
	function channelpromoveL(){
		var selds=$("#channelProductsedtb").datagrid('getChecked');
		var n=selds.length;
		for(var i=0;i<n;i++){
			var index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
			$("#channelProductsedtb").datagrid('deleteRow',index);
		}
	}
	
	var saveing=false;
	function savechannel(){
		var obj=$getByName("bean.photo",$w.currWin());
		if((obj.length==0 || obj.val()=='') && channeluploader.files.length==0){
			window.parent.$w.infoMsg("请上传栏目图片")
		}else{
			var selds=$("#channelProductsedtb").datagrid('getRows');
			if(selds.length==0){
				window.parent.$w.confirmMsg("没有添加商品，是否继续?",function(r){
					if(r)savenext();
				})
			}else savenext();
		}
	}
	function savenext(){
		var selds=$("#channelProductsedtb").datagrid('getRows');
		var proids="";
		for(var i=0;i<selds.length;i++){
			if(proids!="")proids+=",";
			proids+=selds[i].idcode;
		}
		$getByName("bean.products",$w.currWin()).val(proids);

		if(!saveing){
			saveing=true;
			if(channeluploader.files.length>0)channeluploader.start();
			else savechannelSubmit();
		}
	} 
	function savechannelSubmit(){
		$w.doWinForm(function(re){
			saveing=true;
			if(re.state=='ok'){
				var reobj={"id":re.id,"name":$getByName("bean.name",$w.currWin()).val(),"code":re.code,"photo":$getByName("bean.photo",$w.currWin()).val(),"url":$getByName("bean.url",$w.currWin()).val(),"orderno":$getByName("bean.orderno",$w.currWin()).val()};
				$w.closeCurrWin(reobj);
			}
		});
	}
    function seltop(){
        var selds=$("#channelProductsedtb").datagrid('getChecked');
        var n=selds.length;
        var sels=[];
        for(var i=0;i<n;i++){
            sels.push({idcode:selds[0].idcode,fullname:selds[0].fullname,productcode:selds[0].productcode})
            var index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
            $("#channelProductsedtb").datagrid('deleteRow',index);
        }
        for(var i=0;i<sels.length;i++){
            $('#channelProductsedtb').datagrid('insertRow',{
                index: 0,	// index start with 0
                row: {
                    idcode: sels[i].idcode,
                    fullname: sels[i].fullname,
                    productcode:sels[i].productcode
                }
            });
        }

    }
    function selup(){
        var selds=$("#channelProductsedtb").datagrid('getChecked');
        var n=selds.length;
        var sels=[];
        if(n>0){
            var index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
            if(index<=0)return;
            for(var i=0;i<n;i++){
                sels.push({idcode:selds[0].idcode,fullname:selds[0].fullname,productcode:selds[0].productcode})
                index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
                $("#channelProductsedtb").datagrid('deleteRow',index);
            }
            $("#channelProductsedtb").datagrid('uncheckAll');
            for(var i=(sels.length-1);i>=0;i--){
                $('#channelProductsedtb').datagrid('insertRow',{
                    index: index-1,
                    row: {
                        idcode: sels[i].idcode,
                        fullname: sels[i].fullname,
                        productcode:sels[i].productcode
                    }
                });
                $("#channelProductsedtb").datagrid('checkRow',index-1);
            }

        }
    }
    function seldown(){
        var selds=$("#channelProductsedtb").datagrid('getChecked');
        var n=selds.length;
        var sels=[];
        var rnum=$("#channelProductsedtb").datagrid('getRows').length;
        if(n>0){
            var index=$("#channelProductsedtb").datagrid('getRowIndex',selds[n-1].idcode);
            if(index>=(rnum-1))return;
            for(var i=0;i<n;i++){
                sels.push({idcode:selds[0].idcode,fullname:selds[0].fullname,productcode:selds[0].productcode})
                index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
                $("#channelProductsedtb").datagrid('deleteRow',index);
            }
            $("#channelProductsedtb").datagrid('uncheckAll');

            for(var i=(sels.length-1);i>=0;i--){
                $('#channelProductsedtb').datagrid('insertRow',{
                    index: index+1,	// index start with 0
                    row: {
                        idcode: sels[i].idcode,
                        fullname: sels[i].fullname,
                        productcode:sels[i].productcode
                    }
                });
                $("#channelProductsedtb").datagrid('checkRow',index+1);
            }
        }
    }
    function selbottom(){
        var selds=$("#channelProductsedtb").datagrid('getChecked');
        var n=selds.length;
        var sels=[];
        for(var i=0;i<n;i++){
            sels.push({idcode:selds[0].idcode,fullname:selds[0].fullname,productcode:selds[0].productcode})
            var index=$("#channelProductsedtb").datagrid('getRowIndex',selds[0].idcode);
            $("#channelProductsedtb").datagrid('deleteRow',index);
        }
        var rnum=$("#channelProductsedtb").datagrid('getRows').length;

        for(var i=(sels.length-1);i>=0;i--){
            $('#channelProductsedtb').datagrid('insertRow',{
                index: rnum,	// index start with 0
                row: {
                    idcode: sels[i].idcode,
                    fullname: sels[i].fullname,
                    productcode:sels[i].productcode
                }
            });
        }
    }
</script>

<div class="easyui-panel" data-options="doSize:false,layoutH:47,border:false" style="margin:5px">
	<form method="post" action="/information/InformationPage@saveChannelB.page" class="pageForm">
		<w:hidden bind="bean.id"/>
		<w:hidden bind="bean.code"/>
		<w:hidden bind="bean.products"/>
		<div class="ui-formContent">
			<p>
				<label style="width:130px;text-align:right"><font class="red">*</font>栏目名称：</label>
				<w:text bind="bean.name" styleClass="easyui-validatebox" dataOptions="required:true"  style="width:400px"/>
			</p>
			<table cellpadding="0" cellspacing="0">
				<tr>
				<td valign="top" style="padding-top:4px;"><label style="width:130px;text-align:right"><font class="red">*</font>栏目图片：</label></td>
				<td valign="top" style="width:200px;padding-top:4px;padding-left:4px;" id="channelimg">
					<w:notEqual bind="bean.photo" value="">
						<w:hidden bind="bean.photo"/>
						<img src="${fileserver }<w:write bind="bean.photo"/>" style="width:200px">
					</w:notEqual>
					<w:equal bind="bean.photo" value="">
						<img src="<%=path %>/images/selimg.png" style="width:200px">
					</w:equal>
				</td>
				<td valign="top" style="padding-top:4px;padding-left:4px;">
					<a href="javascript:void(0);" class="ui_btn" id="channelimgbtn" onclick="selchannelimg()">选择图片</a>
					<!-- <p class="red" style="color:red">建议上传1024*300尺寸图片</p>-->
				</td>
				</tr>
			</table>
			<p style="clear:both">
				<label style="width:130px;text-align:right">链接网址：</label>
				<w:text bind="bean.url" style="width:400px"/>
			</p>
			<p style="clear:both">
				<label style="width:130px;text-align:right">排序号：</label>
				<w:text bind="bean.orderno" style="width:400px" styleClass="easyui-numberbox"/>
			</p>
			
			<table cellpadding="0" cellspacing="0">
				<tr>
				<td valign="top" style="padding-top:4px;"><label style="width:130px;text-align:right"><font class="red">*</font>添加商品：</label></td>
				<td valign="top" style="padding-top:4px;padding-left:4px;">
					<div style="width:410px;border:1px solid #ddd;height:26px;line-height:26px;background:#fff"><input name="proname" style="display:inline-block;border:0px;margin:0px;width:346px;height:20px;"><a href="javascript:channelquerypro();" style="display:inline-block;float:right;height:26px;background:#F3F3F4;width:40px;color:#666666;text-align:center;font-size:18px;"><i class="fa fa-search"></i></a></div>
					<div style="width:410px;border:1px solid #ddd;border-top:none">
						<table id="channelProductstb" class="easyui-datagrid" style="width:410px;height:320px"  
					        data-options="url:'<%=path %>/products/ProductPage@loadProductPrices.page?rows=20&bean.status=2',fitColumns:true,multiple: true,idField:'idcode',
					        singleSelect:false,border:false,checkbox:true,pagination:false">  
						    <thead>  
						        <tr>  
						        	<th data-options="field:'idcode',checkbox:true"></th> 
						            <th data-options="field:'fullname',width:310">商品名称</th>  
						            <th data-options="field:'productcode'">商品编码</th>
						        </tr>  
						    </thead>  
						</table> 
					</div> 
				</td>
				<td width="50" align="center">
					<p><a href="javascript:void(0);" class="ui_btn" id="channelimgbtn" onclick="channelpromoveR()">></a></p>
					<p><a href="javascript:void(0);" class="ui_btn" id="channelimgbtn" onclick="channelpromoveL()"><</a></p>
					<p>&nbsp;</p>
				</td>
				<td valign="top" style="padding-top:4px;padding-left:4px;">
					<div style="width:410px;border:1px solid #ddd;margin-top:28px;">
					<table id="channelProductsedtb" class="easyui-datagrid" style="width:410px;height:320px"  
					        data-options="url:'<%=path %>/information/InformationPage@loadChannelProducts.page?rows=200&bean.channelid=<w:write bind="bean.id"/>',fitColumns:true,multiple: true,idField:'idcode',
					        singleSelect:false,border:false,checkbox:true,pagination:false">  
					    <thead>  
					        <tr>  
					            <th data-options="field:'idcode',checkbox:true"></th> 
						        <th data-options="field:'fullname',width:310">商品名称</th>  
					            <th data-options="field:'productcode'">商品编码</th>
					        </tr>  
					    </thead>  
					</table> 
					</div>
				</td>
					<td width="50" align="center" style="padding-left:6px">
						<p><a href="javascript:void(0);" class="ui_btn" onclick="seltop()">最顶</a></p>
						<p><a href="javascript:void(0);" class="ui_btn" onclick="selup()">上移</a></p>
						<p><a href="javascript:void(0);" class="ui_btn" onclick="seldown()">下移</a></p>
						<p><a href="javascript:void(0);" class="ui_btn" onclick="selbottom()">最尾</a></p>
					</td>
				</tr>
			</table>
			<br/>
		</div>
	</form>
</div>
<div class="ui-buttonBar">
	<a href="javascript:;" class="easyui-linkbutton marginR16" iconCls="icon_save" onclick="savechannel();">保 存</a>
	<a href="javascript:;" class="easyui-linkbutton" iconCls="icon_cancel" onclick="$w.closeCurrWin()">取 消</a>
</div>
<script>
var plparm={
		runtimes : 'html5,flash,silverlight,html4',
		browse_button : 'channelimgbtn',
		flash_swf_url : ctx+'/plugins/plupload/js/Moxie.swf',
		silverlight_xap_url : ctx+'/plugins/plupload/js/Moxie.xap',
		filters : {
			max_file_size : '2mb',
			mime_types: [
				{title : "Image files", extensions : "jpg,gif,png"}
			]
		},

		init: {
			FilesAdded: function(up, files) {
				$("#channelimg").html('');
				if(files.length>0){
					if(channeluploader.files.length>1)channeluploader.removeFile(uploaderobj.files[0]);
				}
				filesAdded(up,files,'#channelimg');
			},

			UploadProgress: function(up, file) {
				uploadProgress(up,file);
			},
			FileUploaded:function(up,file,responseObject){
				var re=jQuery.parseJSON(responseObject.response);
				$('#plimgurl_'+file.id).val(re.url.replace(re.basepath,""));
			},
			UploadComplete:function(up,files){
				savechannelSubmit();
			},
			Error: function(up, err) {upError(up, err,'2mb');}
		}
	};

	$oss.setUpDir('info');
	channeluploader=$oss.initUpload(plparm);
</script>